<template>
	<div class="wrapper">
		<div class="edit_passwork">
			<div class="edit-form">
				<ul>
					<li class="form-item">
						<u-field label-width="150" label="原密码"  v-model="customForm.oldPasswd" type="password" placeholder="请输入原密码" clearable />
					</li>
					<li class="form-item"><u-field label-width="150" label="新密码" v-model="customForm.newPasswd" type="password" placeholder="6-18位数字、字母、符号组合" clearable /></li>
					<li class="form-item"><u-field label-width="150" label="确认新密码" v-model="customForm.confirmNewPassword" type="password" placeholder="确认新密码" clearable /></li>
				</ul>
			</div>
		</div>

		<div class="myBtn-box"><button class="myBtn" @click="updateHandle">确认</button></div>
	</div>
</template>

<script>
import { updatePassword } from '_a/login';
import { isCheckPassword, confirmPassword } from '_c/utils/validate';
export default {
	name: 'UpdatePassword',
	data() {
		return {
			navBarOptions: {
				title: '修改密码',
				router: { name: 'home' }
			},
			customForm: {
				oldPasswd: '',
				newPasswd: '',
				confirmNewPassword: ''
			}
		};
	},
	methods: {
		updateHandle() {
			let message = '';
			if (confirmPassword(this.customForm.newPasswd, this.customForm.confirmNewPassword)) {
				message = '两次密码输入不一致';
			}
			if (!this.customForm.confirmNewPassword) {
				message = '确认新密码不能为空';
			}
			if (isCheckPassword(this.customForm.newPasswd)) {
				message = '新密码不能小于6位数';
			}
			if (!this.customForm.newPasswd) {
				message = '新密码不能为空';
			}
			if (!this.customForm.oldPasswd) {
				message = '旧密码不能为空';
			}
			if (message) {
				this.$tip.toast(message);
				return false;
			}
			updatePassword(this.customForm).then(res => {
				if (res.code == 200) {
					this.customForm = {};
					this.$tip.modal({ content: res.msg+',即将重新登录', showCancel: false }).then(() => {
						this.$store.dispatch('StoreByLogout').then(res => {
							this.$nav.reLaunch({ path: '/pages/login/index' });
						});
					});
				}else{
					this.$tip.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.wrapper{
		padding: $uni-spacing-row-lg;
	}
.edit_passwork {
	// margin: R(50px) R(25px);
}

.edit_passwork .form-item {
	min-height: R(100px);
	margin: R(25px) 0;
	display: flex;
	align-items: center;
	border-radius: $uni-border-radius-lg;
	background: #fff;
	box-shadow: 0 0 R(10px) rgba(0, 0, 0, 0.1);
}
.myBtn-box{
	margin:$uni-spacing-col-lg;
	display: flex;
	justify-content: center;
}
.myBtn{
	background: $themeColor;
	font-size: $uni-font-size-sm;
	border-radius: $uni-border-radius-lg;
	display: inline-block;
	margin: $uni-spacing-col-lg auto;
	padding: 2px 0px;
	width: 50vw;
}
/deep/.u-border-bottom:after {
	border: none;
}
</style>
